<template>
  <div class="detail-container">
    <el-card shadow="never" style="margin-top: 15px; position: relative">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger"
          >订单状态：{{ orderInfo.orderState | fifState }}</span
        >
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <el-card shadow="never" style="margin-top: 20px">
        <el-form size="mini" label-width="150px" class="minRoW" :rules="rules">
          <el-row>
            <el-col :span="8">
              <el-form-item label="公司名称：">{{
                orderInfo.customerName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同编号：">{{
                orderInfo.crmOrderSn
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单号：">{{
                orderInfo.orderSn
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同公司：">{{
                orderInfo.sellerStoreName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员：">{{
                orderInfo.userName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下单时间：">{{
                orderInfo.createdAt
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单数量(吨)：">{{
                orderInfo.goodsNum
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单金额：">
                {{ orderInfo.allOrderPrice }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付方式：">
                {{ orderInfo.orderPayType }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="结算方式：">{{
                orderInfo.createAbstract
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物流方式：">{{
                orderInfo.orderShippingTypeName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交货方式：">{{
                orderInfo.deliveryType
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单来源：">{{
                orderInfo.isOnLineOrder == 0
                  ? "推广"
                  : orderInfo.isOnLineOrder == 1
                  ? "销售"
                  : ""
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="财务状态：">{{
                orderInfo.financeState
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1"
                label="明确合同约定时间："
              >
                <el-radio-group v-model="orderInfo.isTimeSure">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-else label="明确合同约定时间：">{{
                orderInfo.isTimeSure | fifterTimeSure
              }}</el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="合同截止付款时间：">{{
                orderInfo.expectPayTime
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1"
                label="发票是否开明细："
              >
                <el-radio-group v-model="orderInfo.isInvoiceNeedDetail">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-else label="发票是否开明细：">{{
                orderInfo.isInvoiceNeedDetail == 1
                  ? "是"
                  : orderInfo.isInvoiceNeedDetail == 0
                  ? "否"
                  : ""
              }}</el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1"
                label="是否维护合同："
              >
                <el-radio-group v-model="orderInfo.isDefendOrder">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-else label="是否维护合同：">
                <span
                  style="font-size: 18px; font-weight: bold; color: red"
                  v-if="orderInfo.isDefendOrder == 1"
                  >是</span
                >
                <span v-else>否</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="合同其它备注：">
                {{ orderInfo.orderRemark }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <div style="margin-top: 20px" v-if="orderInfo.buyerAddress">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收货地址</span>
      </div>
      <el-card
        shadow="never"
        style="margin-top: 20px"
        v-if="orderInfo.buyerAddress"
      >
        <el-form size="mini" label-width="150px" class="minRoW">
          <el-row>
            <el-col :span="8">
              <el-form-item label="收货人：" v-if="orderInfo.buyerAddress">{{
                orderInfo.buyerAddress.receiverName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号：" v-if="orderInfo.buyerAddress">{{
                orderInfo.buyerAddress.receiverTel
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货地址：" v-if="orderInfo.buyerAddress">
                {{ orderInfo.buyerAddress.receiverProvince
                }}{{ orderInfo.buyerAddress.receiverCity
                }}{{ orderInfo.buyerAddress.receiverArea }}</el-form-item
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">合同商品</span>
      </div>
      <el-form
        size="mini"
        :rules="rules"
        :model="orderInfo"
        ref="orderInfo"
        label-position="left"
      >
        <el-table
          ref="orderItemTable"
          size="mini"
          :header-cell-style="{ background: '#f8f8f9', color: '#80878f' }"
          :data="orderInfo.goods"
          style="width: 100%; margin-top: 20px"
          border
        >
          <el-table-column label="商品信息" fixed="left" width="180" key="1">
            <template slot-scope="scope">
              <div class="goods-name">{{ scope.row.goodsName }}</div>
              <div class="goods-info">
                <div class="goods-top" style="margin-top: 5px">
                  <div class="price">￥{{ scope.row.goodsPrice }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="成交数量(吨)"
            width="100"
            align="center"
            key="2"
          >
            <template slot-scope="scope">
              {{ scope.row.goodsNum }}
            </template>
          </el-table-column>
          <el-table-column
            label="采购底价"
            fixed="left"
            width="100"
            align="center"
            key="25"
          >
            <template slot-scope="scope">
              <span style="color: Red">{{ scope.row.purchasePrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="杂费(装卸费)" width="100" align="center" key="3">
            <template slot-scope="scope">
              {{ scope.row.consultation }}
            </template>
          </el-table-column>
          <el-table-column
            label="毛利（吨）"
            width="100"
            align="center"
            key="4"
          >
            <template slot-scope="scope">
              <!-- <el-form-item style="margin-bottom: 0;" v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1">
                            <el-input v-model="scope.row.grossProfit"></el-input>
                          </el-form-item> -->
              <span>{{ scope.row.grossProfit }}</span>
            </template>
          </el-table-column>
          <el-table-column label="运费" width="100" align="center" key="5">
            <template slot-scope="scope">
              <span style="color: Red">{{ scope.row.goodsFreight }}</span>
            </template>
          </el-table-column>

          <el-table-column label="底色" key="28" width="150">
            <template slot-scope="scope">
              <div
                v-if="
                  orderInfo.orderState == 0 &&
                  orderInfo.isNeedMyCheck == 1 &&
                  scope.row.isNeedInputColor == 1
                "
              >
                <el-form-item
                  :prop="`goods.${scope.$index}.goodsColor`"
                  :rules="rules.goodsColor"
                >
                  <el-select
                    v-model="scope.row.goodsColor"
                    size="small"
                    clearable
                  >
                    <el-option
                      value="蓝底透明"
                      label="蓝底透明"
                      key="1"
                    ></el-option>
                    <el-option
                      value="白底透明"
                      label="白底透明"
                      key="2"
                    ></el-option>
                    <el-option
                      value="黑底透明"
                      label="黑底透明"
                      key="3"
                    ></el-option>
                    <el-option value="黑色" label="黑色" key="4"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div v-else>
                {{ scope.row.goodsColor }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="成交单价" width="100" align="center" key="7">
            <template slot-scope="scope">
              <!-- <span v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1">{{scope.row | fifPrice}}</span> -->
              <span>{{ scope.row.goodsPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="合计金额" width="100" align="center" key="8">
            <template slot-scope="scope">
              <!-- <span v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1">{{scope.row | fifAmount}}</span> -->
              <span>{{ scope.row.goodsAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="运费承担" width="100" align="center" key="9">
            <template slot-scope="scope">
              {{ scope.row.freightType | fifFreightType }}
            </template>
          </el-table-column>
          <el-table-column label="结算方式" width="100" align="center" key="6">
            <template slot-scope="scope">
              {{ scope.row.ospPayMethod }}
            </template>
          </el-table-column>
          <el-table-column label="价格类型" width="100" align="center" key="10">
            <template slot-scope="scope">
              {{ scope.row.priceType }}
            </template>
          </el-table-column>
          <el-table-column
            label="期望发货时间"
            width="100"
            align="center"
            key="11"
          >
            <template slot-scope="scope">
              {{ scope.row.expectReceiveDate }}
            </template>
          </el-table-column>

          <el-table-column
            label="发货紧急度"
            width="200"
            align="center"
            key="12"
          >
            <template slot-scope="scope">
              <!-- <div v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1">
                            <el-form-item style="margin-bottom: 0;" :prop="`goods.${scope.$index}.urgentType`" :rules="rules.urgentType">
                              <el-select v-model="scope.row.urgentType" class="input-width" style="width:120px" placeholder="请选择" clearable>
                                <el-option :value="item.cdd_value" :label="item.cdd_value" :key="item.cdd_id" v-for="item in urgentTypeList"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item :prop="`goods.${scope.$index}.urgentRemark`" :rules="rules.urgentRemark" v-if="scope.row.urgentType == '必须'">
                              <el-input v-model="scope.row.urgentRemark" placeholder="说明原因"></el-input>
                            </el-form-item>
                          </div> -->
              <!-- <div v-else> -->
              <div>{{ scope.row.urgentTypeStr }}</div>
              <div v-if="scope.row.urgentTypeStr == '必须'">
                {{ scope.row.urgentRemark }}
              </div>
              <!-- </div> -->
            </template>
          </el-table-column>
          <el-table-column label="发货类型" width="100" align="center" key="13">
            <template slot-scope="scope">
              {{ scope.row.sendType }}
            </template>
          </el-table-column>
          <el-table-column label="发货仓库" width="100" align="center" key="14">
            <template slot-scope="scope">
              {{ scope.row.warehouseName }}
            </template>
          </el-table-column>

          <el-table-column label="发货时间" width="100" align="center" key="19">
            <template slot-scope="scope">
              {{ scope.row.sendDate1 }}
            </template>
          </el-table-column>
          <el-table-column label="备注" width="150" key="20">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column label="物流备注" width="150" key="20">
            <template slot-scope="scope">
              {{ scope.row.freightRemark }}
            </template>
          </el-table-column>
          <el-table-column
            label="从我司购买原因"
            key="24"
            width="150"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- <div v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1">
                        <el-form-item style="margin-bottom: 0;" :prop="`goods.${scope.$index}.fromBuyReason`" :rules="rules.fromBuyReason">
                          <el-select v-model="scope.row.fromBuyReason" size="small" clearable>
                            <el-option :value="item.cdd_id" :label="item.cdd_value" :key="item.cdd_id" v-for="item in fromBuyReasonList"></el-option>
                          </el-select>
                        </el-form-item>
                      </div> -->
              <div>
                {{ scope.row.fromBuyReasonStr }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="客户购买原因"
            key="23"
            width="150"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- <div v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1">
                        <el-form-item style="margin-bottom: 0;" :prop="`goods.${scope.$index}.customerBuyReason`" :rules="rules.customerBuyReason">
                          <el-select v-model="scope.row.customerBuyReason" size="small" clearable>
                            <el-option :value="item.cdd_id" :label="item.cdd_value" :key="item.cdd_id" v-for="item in customerBuyReasonList"></el-option>
                          </el-select>
                        </el-form-item>
                      </div> -->
              <div>
                {{ scope.row.customerBuyReasonStr }}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div
          style="margin-top: 20px"
          v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1"
        >
          <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
          <span class="font-small">特殊需求</span>
        </div>

        <el-card
          shadow="never"
          style="margin-top: 20px"
          v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1"
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="客户行业："
                label-width="150px"
                style="margin-bottom: 10px"
              >
                <el-select
                  v-model="orderInfo.customerIndustry"
                  @change="changeCustomerIndustry"
                >
                  <el-option
                    v-for="item in customerIndustryList"
                    :value="item.cdd_value"
                    :key="item.cdd_value"
                    :label="item.cdd_value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="是否工厂直发："
                label-width="150px"
                style="margin-bottom: 10px"
              >
                <el-radio-group
                  v-model="orderInfo.isFactoryDeliver"
                  @change="changeCustomerIndustry"
                >
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="生产日期："
                label-width="150px"
                style="margin-bottom: 10px"
              >
                <el-select
                  v-model="orderInfo.productionDate"
                  :disabled="
                    (orderInfo.customerIndustry == '注塑客户' ||
                      orderInfo.customerIndustry == '纺丝客户' ||
                      orderInfo.customerIndustry == '挤出客户' ||
                      orderInfo.customerIndustry == '挤出型材客户' ||
                      orderInfo.customerIndustry == '改性客户') &&
                    orderInfo.isFactoryDeliver != ''
                  "
                >
                  <el-option
                    key="一个月以内"
                    label="一个月以内"
                    value="一个月以内"
                  ></el-option>
                  <el-option
                    key="三个月以内"
                    label="三个月以内"
                    value="三个月以内"
                  ></el-option>
                  <el-option
                    key="半年以内"
                    label="半年以内"
                    value="半年以内"
                  ></el-option>
                  <el-option
                    key="一年以内"
                    label="一年以内"
                    value="一年以内"
                  ></el-option>
                  <el-option
                    key="一年以上"
                    label="一年以上"
                    value="一年以上"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="真空率："
                label-width="150px"
                style="margin-bottom: 10px"
              >
                <el-select
                  v-model="orderInfo.packingRequire"
                  :disabled="
                    (orderInfo.customerIndustry == '注塑客户' ||
                      orderInfo.customerIndustry == '纺丝客户' ||
                      orderInfo.customerIndustry == '挤出客户' ||
                      orderInfo.customerIndustry == '挤出型材客户' ||
                      orderInfo.customerIndustry == '改性客户') &&
                    orderInfo.isFactoryDeliver != ''
                  "
                >
                  <el-option
                    key="27%以上"
                    label="27%以上 "
                    value="27%以上"
                  ></el-option>
                  <el-option
                    key="36%以上"
                    label="36%以上"
                    value="36%以上"
                  ></el-option>
                  <el-option
                    key="60%以上"
                    label="60%以上"
                    value="60%以上"
                  ></el-option>
                  <el-option
                    key="72%以上"
                    label="72%以上"
                    value="72%以上"
                  ></el-option>
                  <el-option
                    key="80%以上"
                    label="80%以上"
                    value="80%以上"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="破包率："
                label-width="150px"
                style="margin-bottom: 10px"
              >
                <el-input
                  v-model="orderInfo.brokenRate"
                  style="width: 214px"
                  aria-placeholder=""
                  :disabled="
                    (orderInfo.customerIndustry == '注塑客户' ||
                      orderInfo.customerIndustry == '纺丝客户' ||
                      orderInfo.customerIndustry == '挤出客户' ||
                      orderInfo.customerIndustry == '挤出型材客户' ||
                      orderInfo.customerIndustry == '改性客户') &&
                    orderInfo.isFactoryDeliver != ''
                  "
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="节假日是否收货："
                label-width="150px"
                style="margin-bottom: 10px"
              >
                <el-radio-group v-model="orderInfo.isHolidayCanSend">
                  <el-radio :label="2">周六周日都不收货</el-radio>
                  <el-radio :label="3">周日不收货</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item
                label="是否为同一批次产品："
                label-width="150px"
                style="margin-bottom: 0px"
              >
                <el-input
                  placeholder="请输入"
                  style="width: 214px"
                  v-model="orderInfo.batchRequire"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item
                label="备注："
                label-width="150px"
                style="margin-bottom: 0px"
              >
                <el-autocomplete
                  style="width: 100%"
                  class="inline-input"
                  v-model="orderInfo.buyerRemark"
                  :fetch-suggestions="querySearch2"
                  placeholder="请输入特殊备注：如批号需求，发货需求等，不显示在合同上"
                ></el-autocomplete>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="16">
            <el-form-item
              label="是否为转售或代加工发货："
              label-width="150px"
              style="margin-bottom: 0px"
            >
              <el-radio-group v-model="orderInfo.isZ">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-card>

        <el-alert
          v-else
          style="margin-top: 20px"
          :closable="false"
          type="warning"
          show-icon
        >
          <template slot="title">
            <div style="color: #606266">特殊需求</div>
          </template>
          <template>
            <div
              style="padding-bottom: 10px; color: #606266; line-height: 22px"
            >
              <span style="padding-right: 15px; white-space: nowrap"
                >客户行业：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{ orderInfo.customerIndustry }}</span
                ></span
              >
              <span style="padding-right: 15px; white-space: nowrap"
                >是否工厂直发：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{
                    orderInfo.isFactoryDeliver == 1
                      ? "是"
                      : orderInfo.isFactoryDeliver == 2
                      ? "否"
                      : "--"
                  }}</span
                ></span
              >
              <span style="padding-right: 15px; white-space: nowrap"
                >生产日期：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{
                    orderInfo.productionDate != ""
                      ? orderInfo.productionDate
                      : "--"
                  }}</span
                ></span
              >
              <span style="padding-right: 15px; white-space: nowrap"
                >真空率：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{
                    orderInfo.packingRequire != ""
                      ? orderInfo.packingRequire
                      : "--"
                  }}</span
                >
              </span>
              <span style="padding-right: 15px; white-space: nowrap"
                >破包率：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{
                    orderInfo.brokenRate != "" ? orderInfo.brokenRate : "--"
                  }}</span
                >
              </span>
              <span style="padding-right: 15px; white-space: nowrap"
                >节假日是否收货：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{
                    orderInfo.isHolidayCanSend == 2
                      ? "周六周日都不收货"
                      : orderInfo.isHolidayCanSend == 3
                      ? "周日不收货"
                      : "--"
                  }}</span
                ></span
              >
              <span style="padding-right: 15px; white-space: nowrap"
                >是否为同一批次产品：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{
                    orderInfo.batchRequire != "" ? orderInfo.batchRequire : "--"
                  }}</span
                ></span
              >
              <span style="padding-right: 15px; white-space: nowrap"
                >是否为对接客户：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{ orderInfo.isZ == 1 ? "是" : "否" }}</span
                ></span
              >
              <span style="padding-right: 15px; white-space: nowrap"
                >备注：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{
                    orderInfo.buyerRemark ? orderInfo.buyerRemark : "--"
                  }}</span
                ></span
              >
              <span style="padding-right: 15px; white-space: nowrap"
                >是否为转售或代加工发货：<span
                  style="font-weight: bold; font-size: 14px; color: Red"
                  >{{ orderInfo.isZ == 1 ? "是" : "否" }}</span
                ></span
              >
            </div>
          </template>
        </el-alert>

        <div style="margin-top: 20px">
          <el-form-item
            label="操作备注(回退时必填)"
            v-if="orderInfo.orderState == 1 && orderInfo.isNeedMyCheck == 2"
          >
            <el-input
              :autosize="{ minRows: 2, maxRows: 6 }"
              type="textarea"
              style="width: 300px"
              v-model.trim="saleRemark"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>

      <div style="margin-top: 20px; clear: both" v-if="dgList.length > 0">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">发货信息</span>
      </div>
      <el-table
        v-if="dgList.length > 0"
        ref="orderItemTable"
        :data="dgList"
        style="width: 100%; margin-top: 20px"
        border
      >
        <el-table-column label="类型" width="100" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="发货单号" width="160" align="center">
          <template slot-scope="scope">
            {{ scope.row.shippingCode }}
          </template>
        </el-table-column>
        <el-table-column label="开票状态" width="100" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="发货时间" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.shipDate }}
          </template>
        </el-table-column>
        <el-table-column label="商品牌号" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.goodsName }}
          </template>
        </el-table-column>
        <el-table-column label="发货数量(吨)" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.shipNum }}
          </template>
        </el-table-column>
        <el-table-column label="发货批号" width="150" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="结算方式" width="150" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="合同单价" width="100" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="采购底价" width="150" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="实际含税运费" width="100" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="运费承担" width="100" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="杂费(装卸费)" width="100" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="实际现金毛利" width="100" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="销售发货毛利" width="100" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="销售发货吨毛利" width="120" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="合同分类" width="80" align="center">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="状态" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.shipState }}
          </template>
        </el-table-column>
        <el-table-column
          label="司机姓名"
          width="120"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column
          label="司机电话"
          width="120"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column
          label="车牌号"
          width="120"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope"> </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px; clear: both" v-if="cyList.length > 0">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">收款信息</span>
      </div>
      <el-table
        v-if="cyList.length > 0"
        ref="orderItemTable"
        :data="cyList"
        style="width: 100%; margin-top: 20px"
        border
      >
        <el-table-column label="收款日期" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.payTime }}
          </template>
        </el-table-column>
        <el-table-column label="收款方式" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.payType }}
          </template>
        </el-table-column>
        <el-table-column label="收款人" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.operatorName }}
          </template>
        </el-table-column>
        <el-table-column label="收款金额" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.payAmount }}
          </template>
        </el-table-column>
        <el-table-column label="收款凭证" width="200" align="center">
          <template slot-scope="scope">
            <img
              :src="scope.row.payPicUrl"
              @click="preview(scope.row.payPicUrl)"
              style="width: 50px; height: 50px; object-fit: contain"
            />
          </template>
        </el-table-column>
        <el-table-column label="收款备注" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
      </el-table>

      <div style="text-align: center; clear: both; margin-top: 20px">
        <div
          class="page-bottom"
          v-if="orderInfo.orderState == 0 && orderInfo.isNeedMyCheck == 1"
        >
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading"
            >确认订单</el-button
          >
          <el-button @click="cancelSee">取消合同</el-button>
        </div>

        <div
          class="page-bottom"
          v-if="
            orderInfo.orderState == 1 &&
            orderInfo.isNeedMyCheck == 2 &&
            salesManagerAudit
          "
        >
          <el-button type="primary" @click="showCheck" :loading="btnLoading2"
            >销售经理审核</el-button
          >
          <el-button @click="blackOrder" :loading="btnLoading4">回退</el-button>
        </div>

        <div
          class="page-bottom"
          v-if="
            orderInfo.orderState == 2 &&
            orderInfo.isNeedMyCheck == 3 &&
            orderInfo.crmOrderSn != '' &&
            jpgUrl != ''
          "
        >
          <el-button
            @click="preview()"
            :loading="loading"
            type="info"
            v-if="orderInfo.crmOrderSn != ''"
          >
            查看PDF</el-button
          >
        </div>
      </div>
      <!-- 操作日志 -->
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">操作日志</span>
      </div>
      <el-card shadow="never" style="margin-top: 20px">
        <el-row
          v-for="(record, index) in orderInfo.logList"
          :key="index"
          style="font-size: 14px; color: #606266; padding: 5px 0"
        >
          <el-col :span="3">{{ record.logTime }}</el-col>
          <el-col :span="21">{{ record.logContent }}</el-col>
        </el-row>
      </el-card>

      <!-- 合同备注 -->
      <!-- <div style="margin-top:20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">合同备注</span>
                <el-button type="text" class="font-small" style="color:deepskyblue" @click="showDialogRemark">添加备注</el-button>
              </div>
              <div style="margin-top:20px;">
                <ul>
                       <li v-for="(record, index) in records" :key="index">
                         {{ record.time | formatDate }} {{ record.name }}{{ record.note }}
                       </li>
                </ul>
              </div> -->

      <!-- 变更纪录 -->
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">变更记录</span>
      </div>
      <div style="margin-top: 20px">
        <ul>
          <li v-for="(record, index) in records" :key="index">
            {{ record.time | formatDate }} {{ record.system
            }}{{ record.content }}
          </li>
        </ul>
      </div>
    </el-card>

    <!--备注-->
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose3"
      title="填写备注"
      :visible.sync="dialogVisible3"
      width="400px"
    >
      <el-form
        :model="remarkForm"
        size="mini"
        label-width="100px"
        ref="remarkForm"
        :rules="rules3"
      >
        <el-form-item label="调整原因：" prop="remark">
          <el-input
            v-model="remarkForm.remark"
            :autosize="{ minRows: 2, maxRows: 6 }"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose3">取 消</el-button>
        <el-button type="primary" @click="handleConfirm3" :loading="btnLoading5"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--取消合同-->
    <el-dialog
      :close-on-click-modal="false"
      title="取消订单"
      :visible.sync="showCancelOrder"
      width="400px"
    >
      <el-form
        :model="cancelForm"
        size="mini"
        label-width="120px"
        ref="cancelForm"
        :rules="cancelRules"
      >
        <el-form-item label="订单取消原因：" prop="cancelCause">
          <el-select
            v-model.number="cancelForm.cancelCause"
            class="input-width"
            style="width: 195px"
            placeholder="请选择"
          >
            <el-option
              :value="item"
              :label="item"
              :key="item"
              v-for="item in cancelRemarkList"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="取消备注：" prop="remark">
          <el-input
            v-model="cancelForm.cancelRemark"
            :autosize="{ minRows: 2, maxRows: 6 }"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showCancelOrder = false">取 消</el-button>
        <el-button type="primary" @click="submitCancel" :loading="btnLoading3"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import store from "@/store";
import {
  getOrderInfo,
  getCustomerSetting,
  circulationOrder,
  ordPayList,
  ordDeliverGoods,
  originalContractPic,
} from "@/api/allInLine/inquiry";
import { validateCommission } from "@/utils/validate";
import {
  productionDateList,
  packingRequireList,
  orderRemarkList,
  urgentTypeList,
  cancelRemarkList,
} from "@/utils/constant.js";
const defauleQuitForm = {
  val: "",
};
export default {
  name: "allInLineOrderDetail",
  data() {
    return {
      roles: store.getters.roles ? store.getters.roles : [],
      loading: false,
      tableData: [],
      orderId: this.$route.query.orderId,
      orderInfo: {},
      btnLoading: false,
      saleRemark: "",
      jpgUrl: "",
      btnLoading1: false,
      rules: {
        goodsColor: [{ required: true, trigger: "change", message: "请选择" }],
        urgentType: [{ required: true, trigger: "change", message: " " }],
        urgentRemark: [
          { required: true, trigger: "blur", message: "请说明原因" },
        ],
        customerBuyReason: [
          { required: true, trigger: "change", message: "请选择" },
        ],
        fromBuyReason: [
          { required: true, trigger: "change", message: "请选择" },
        ],
      },

      dgList: [],

      customerBuyReasonList: [],
      fromBuyReasonList: [],

      productionDateList: productionDateList,
      packingRequireList: packingRequireList,
      orderRemarkList: orderRemarkList,
      urgentTypeList: urgentTypeList,
      cancelRemarkList: cancelRemarkList,
      customerIndustryList: [],
      cyList: [],
      records: [],

      cancelForm: {
        cancelCause: "",
        cancelRemark: "",
      },
      btnLoading3: false,
      showCancelOrder: false,
      cancelRules: {
        cancelCause: [{ required: true, trigger: "change", message: "请选择" }],
      },

      btnLoading2: false,
      btnLoading4: false,

      dialogVisible3: false,
      btnLoading5: false,
      remarkForm: {
        remarkTypeStr: "",
        remark: "",
      },
      rules3: {
        remark: [{ required: true, trigger: "blur", message: "请输入备注" }],
      },
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
    salesManagerAudit() {
      if (this.roles.indexOf("salesManagerAudit") != -1) {
        return true;
      } else {
        return false;
      }
    },
    changeOrderDetailRemark() {
      if (this.roles.indexOf("changeOrderDetailRemark") != -1) {
        return true;
      } else {
        return false;
      }
    },
    inputOrderCancelReason() {
      if (this.roles.indexOf("inputOrderCancelReason") != -1) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    this.getPageInfo();
    this.getCustomerSettingList();
    this.getOrdPayList();
    this.getOrdDeliverGoods();
  },

  filters: {
    //成交单价
    fifPrice(item) {
      let purchasePrice = item.purchasePrice
        ? parseFloat(item.purchasePrice)
        : 0;
      let consultation = item.consultation ? parseFloat(item.consultation) : 0;
      let grossProfit = item.grossProfit ? parseFloat(item.grossProfit) : 0;
      let goodsFreight = item.goodsFreight ? parseFloat(item.goodsFreight) : 0;
      let goodsNum = item.goodsNum ? parseFloat(item.goodsNum) : 0;
      let price = 0;
      price = (
        purchasePrice +
        consultation +
        grossProfit +
        goodsFreight / goodsNum
      ).toFixed(2);
      return price;
    },

    //合计金额
    fifAmount(item) {
      let purchasePrice = item.purchasePrice
        ? parseFloat(item.purchasePrice)
        : 0;
      let consultation = item.consultation ? parseFloat(item.consultation) : 0;
      let grossProfit = item.grossProfit ? parseFloat(item.grossProfit) : 0;
      let goodsFreight = item.goodsFreight ? parseFloat(item.goodsFreight) : 0;
      let goodsNum = item.goodsNum ? parseFloat(item.goodsNum) : 0;
      let price = 0;
      price =
        purchasePrice + consultation + grossProfit + goodsFreight / goodsNum;
      let amount = (price * goodsNum).toFixed(4);
      return amount;
    },

    //商品总额
    orderGoods(list) {
      let sum = 0;
      list.forEach((item) => {
        let purchasePrice = item.purchasePrice
          ? parseFloat(item.purchasePrice)
          : 0;
        let consultation = item.consultation
          ? parseFloat(item.consultation)
          : 0;
        let grossProfit = item.grossProfit ? parseFloat(item.grossProfit) : 0;
        let goodsFreight = item.goodsFreight
          ? parseFloat(item.goodsFreight)
          : 0;
        let goodsNum = item.goodsNum ? parseFloat(item.goodsNum) : 0;
        let price = 0;
        price =
          purchasePrice + consultation + grossProfit + goodsFreight / goodsNum;
        let amount = price * goodsNum;
        sum = sum + amount;
      });
      return sum.toFixed(4);
    },

    //订单金额
    orderAmount(allGoodsPrice, orderCouponAmount, ordershippingFee) {
      let goodsP = allGoodsPrice ? parseFloat(allGoodsPrice) : 0;
      let coupon = orderCouponAmount ? parseFloat(orderCouponAmount) : 0;
      let shippingFee = ordershippingFee ? parseFloat(ordershippingFee) : 0;
      return (goodsP + shippingFee - coupon).toFixed(4);
    },

    //毛利总额
    allGrossProfit(list) {
      let sum = 0;
      list.forEach((el) => {
        let grossProfit = el.grossProfit ? parseFloat(el.grossProfit) : 0;
        let goodsNum = el.goodsNum ? parseFloat(el.goodsNum) : 0;
        sum = sum + grossProfit * goodsNum;
      });
      return sum.toFixed(4);
    },

    fifterTimeSure(val) {
      if (val == 1) {
        return "是";
      } else if (val == 2) {
        return "否";
      }
    },
    fifFreightType(val) {
      if (val == "sale") {
        return "销售承担";
      } else if (val == "purchase") {
        return "采购承担";
      }
    },
    fifState(val) {
      if (val == -1) {
        return "已取消";
      } else if (val == 0) {
        return "待销售确认";
      } else if (val == 1) {
        return "待销售经理确认";
      } else if (val == 2) {
        return "完成";
      }
    },
    fiferPayState(val) {
      if (val == 0) {
        return "未支付";
      } else if (val == 1) {
        return "支付失败";
      } else if (val == 2) {
        return "支付中";
      } else if (val == 3) {
        return "已支付";
      }
    },

    financeState(val) {
      if (val == 1) {
        return "财务已审核";
      } else if (val == 2) {
        return "订单关闭";
      } else if (val == 0) {
        return "财务未审核";
      }
    },

    fiforderPayType(val) {
      if (val == "BANK_PAY") {
        return "银行汇款";
      } else if (val == "COD_PAY") {
        return "货到付款";
      } else if (val == "DEPOSIT_PAY") {
        return "定金";
      } else if (val == "XISHANG_PAY") {
        return "锡商支付";
      } else {
        return "其他";
      }
    },
  },
  methods: {
    //提交订单
    handleConfirm() {
      this.$refs["orderInfo"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交订单信息无误！", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.btnLoading = true;
              let data = {};
              data.orderId = this.orderId;
              data.state = 1;
              data.productionDate = this.orderInfo.productionDate;
              data.packingRequire = this.orderInfo.packingRequire;
              data.isHolidayCanSend = this.orderInfo.isHolidayCanSend;
              data.isFactoryDeliver = this.orderInfo.isFactoryDeliver;
              data.batchRequire = this.orderInfo.batchRequire;
              data.customerIndustry = this.orderInfo.customerIndustry;
              data.brokenRate = this.orderInfo.brokenRate;
              data.buyerRemark = this.orderInfo.buyerRemark;
              data.isTimeSure = this.orderInfo.isTimeSure;
              data.isInvoiceNeedDetail = this.orderInfo.isInvoiceNeedDetail;
              data.isDefendOrder = this.orderInfo.isDefendOrder;
              data.isZ = this.orderInfo.isZ;
              data.goods = [];
              this.orderInfo.goods.forEach((el) => {
                data.goods.push({
                  ospId: el.ospId,
                  grossProfit: el.grossProfit,
                  goodsColor: el.goodsColor,
                  remark: el.remark,
                  urgentType: el.urgentType,
                  urgentRemark: el.urgentRemark,
                  fromBuyReason: el.fromBuyReason,
                  customerBuyReason: el.customerBuyReason,
                });
              });
              circulationOrder(data)
                .then(() => {
                  this.btnLoading = false;
                  this.$message({
                    message: "操作成功",
                    type: "success",
                  });
                  this.getPageInfo();
                })
                .catch(() => {
                  this.btnLoading = false;
                });
            })
            .catch(() => {});
        }
      });
    },

    //取消合同
    cancelSee() {
      this.showCancelOrder = true;
      this.cancelForm.cancelRemark = "";
      this.cancelForm.cancelCause = "";
    },

    //确认取消
    submitCancel() {
      this.$refs["cancelForm"].validate((valid) => {
        if (valid) {
          this.btnLoading3 = true;
          circulationOrder({
            orderId: this.orderId,
            onLineRemark: this.cancelForm.cancelRemark,
            cancelCause: this.cancelForm.cancelCause,
            state: 3,
          })
            .then((res) => {
              this.getPageInfo();
              this.showCancelOrder = false;
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.btnLoading3 = false;
            })
            .catch(() => {
              this.btnLoading3 = false;
            });
        }
      });
    },

    //经理审核
    showCheck() {
      this.$confirm("确认审核通过？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          circulationOrder({
            orderId: this.orderId,
            onLineRemark: this.saleRemark,
            state: 2,
          })
            .then((res) => {
              this.getPageInfo();
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.btnLoading2 = false;
            })
            .catch(() => {
              this.btnLoading2 = false;
            });
        })
        .catch(() => {});
    },

    //回退
    blackOrder() {
      if (this.saleRemark == "") {
        this.$message.error("回退时，操作备注必需填写！");
        return false;
      }
      this.btnLoading4 = true;
      circulationOrder({
        orderId: this.orderId,
        onLineRemark: this.saleRemark,
        state: 4,
      })
        .then((res) => {
          this.btnLoading4 = false;
          this.$message({
            message: "合同已回退成功",
            type: "success",
          });
          this.getPageInfo();
        })
        .catch(() => {
          this.btnLoading4 = false;
        });
    },

    //获取合同详情
    getPageInfo() {
      this.loading = true;
      getOrderInfo({ orderId: this.orderId }).then(async (res) => {
        this.orderInfo = res;
        this.orderInfo.isZ = res.isZ ? res.isZ : 0;
        this.orderInfo.isTimeSure = this.orderInfo.isTimeSure
          ? this.orderInfo.isTimeSure
          : 2;
        if (
          res.orderState == 2 &&
          res.isNeedMyCheck == 3 &&
          res.crmOrderSn != ""
        ) {
          await originalContractPic({ orderId: res.orderId }).then((res1) => {
            this.jpgUrl = res1;
          });
          this.loading = false;
        }
      });
    },
    //获取客户配置
    getCustomerSettingList() {
      getCustomerSetting().then((res) => {
        res.forEach((el) => {
          if (el.cdt_code == "customer_industry") {
            this.customerIndustryList = el.data;
          } else if (el.cdt_code == "urgent_type") {
            this.urgentTypeList = el.data;
          } else if (el.cdt_code == "customer_buy_reason") {
            this.customerBuyReasonList = el.data;
          } else if (el.cdt_code == "from_buy_reason") {
            this.fromBuyReasonList = el.data;
          }
        });
      });
    },

    //获取发货信息
    getOrdDeliverGoods() {
      ordDeliverGoods({ orderId: this.orderId }).then((res) => {
        this.dgList = res;
      });
    },
    //获取收款信息
    getOrdPayList() {
      ordPayList({ orderId: this.orderId }).then((res) => {
        this.cyList = res;
      });
    },

    querySearch2(queryString, cb) {
      cb(this.orderRemarkList);
    },
    //切换客户行业或是否工厂直发
    changeCustomerIndustry() {
      switch (this.orderInfo.customerIndustry) {
        case "注塑客户":
          this.orderInfo.productionDate =
            this.orderInfo.isFactoryDeliver == 1
              ? "半年以内"
              : this.orderInfo.isFactoryDeliver == 2
              ? "半年以内"
              : "";
          this.orderInfo.packingRequire =
            this.orderInfo.isFactoryDeliver == 1
              ? "60%以上"
              : this.orderInfo.isFactoryDeliver == 2
              ? "27%以上"
              : "";
          this.orderInfo.brokenRate = "0";
          break;
        case "纺丝客户":
          this.orderInfo.productionDate =
            this.orderInfo.isFactoryDeliver == 1
              ? "三个月以内"
              : this.orderInfo.isFactoryDeliver == 2
              ? "半年以内"
              : "";
          this.orderInfo.packingRequire =
            this.orderInfo.isFactoryDeliver == 1
              ? "80%以上"
              : this.orderInfo.isFactoryDeliver == 2
              ? "72%以上"
              : "";
          this.orderInfo.brokenRate = "0";
          break;
        case "挤出客户":
        case "挤出型材客户":
          this.orderInfo.productionDate =
            this.orderInfo.isFactoryDeliver == 1
              ? "半年以内"
              : this.orderInfo.isFactoryDeliver == 2
              ? "半年以内"
              : "";
          this.orderInfo.packingRequire =
            this.orderInfo.isFactoryDeliver == 1
              ? "60%以上"
              : this.orderInfo.isFactoryDeliver == 2
              ? "36%以上"
              : "";
          this.orderInfo.brokenRate = "0";
          break;
        case "改性客户":
          this.orderInfo.productionDate =
            this.orderInfo.isFactoryDeliver == 1
              ? "半年以内"
              : this.orderInfo.isFactoryDeliver == 2
              ? "一年以内"
              : "";
          this.orderInfo.packingRequire =
            this.orderInfo.isFactoryDeliver == 1
              ? "60%以上"
              : this.orderInfo.isFactoryDeliver == 2
              ? "27%以上"
              : "";
          this.orderInfo.brokenRate = "0";
          break;
        default:
          this.orderInfo.productionDate = "";
          this.orderInfo.packingRequire = "";
          this.orderInfo.brokenRate = "0";
          break;
      }
    },

    //去订单详情
    toOrderDetail(item) {
      let routeData = this.$router.resolve({
        name: "saleDetail",
        query: { id: item.orderId, type: "see" },
      });
      window.open(routeData.href);
    },

    //提交订单备注
    submitContractOtherRemark() {
      changeOtherRemark({
        orderId: this.orderId,
        contractOtherRemark: this.orderInfo.contractOtherRemark,
        expectPayTime: this.orderInfo.expectPayTime,
      }).then(() => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.getPageInfo();
      });
    },

    preview(url) {
      if (url) {
        window.open(url);
      } else {
        window.open(this.jpgUrl);
      }
    },

    //显示备注弹窗
    showDialogRemark() {
      this.dialogVisible3 = true;
      this.remarkForm.remark = "";
      this.remarkForm.remarkTypeStr = "";
    },
    //关闭备注弹窗
    handleClose3() {
      this.dialogVisible3 = false;
      this.$refs.remarkForm.clearValidate();
    },
    //提交备注
    handleConfirm3() {
      this.$refs["remarkForm"].validate((valid) => {
        if (valid) {
          this.btnLoading5 = true;
          ordersRemark({
            orderId: this.orderId,
            remark: this.remarkForm.remark,
          })
            .then(() => {
              this.btnLoading5 = false;
              this.dialogVisible5 = false;
              this.getPageInfo();
            })
            .catch(() => {
              this.btnLoading5 = false;
            });
        }
      });
    },
  },
};
</script>

<style  lang="scss">
.detail-container {
  width: 90%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
  .el-card__header {
    background: #f8f8f8;
    .kehu-name {
      display: inline-block;
      font-size: 14px;
      vertical-align: middle;
    }
    .kehu-label {
      font-size: 12px;
      vertical-align: middle;
      display: inline-block;
      margin-left: 15px;
      color: #409eff;
      background: #ecf5ff;
      border: 1px solid #b3d8ff;
      height: 24px;
      line-height: 24px;
      padding: 0 10px;
      border-radius: 5px;
    }
    .kehu-info {
      text-align: right;
      font-size: 12px;
      color: #333;
      line-height: 20px;
      span {
        padding-left: 16px;
      }
    }
  }
  .operate-container {
    background: #f2f6fc;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }
}
.price-block {
  font-size: 12px;
  line-height: 30px;
  .lab {
    display: inline-block;
    width: 100px;
    text-align: right;
  }
  .text {
    display: inline-block;
  }
}
.minRoW .el-form-item {
  margin-bottom: 5px;
}
.red-form {
  .el-form-item__label {
    color: red;
  }
}
.tongJitable {
  border-left: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
  font-size: 12px;
  margin-bottom: 20px;
  td {
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    div.tddiv {
      min-height: 30px;
      line-height: 30px;
      padding: 0 5px;
      text-align: center;
      white-space: nowrap;
    }
  }
  .bgtd {
    background: #f5f7fa;
  }
}

.title-tab {
  border-radius: 8px;
  background: #eee;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
  padding: 0 5px;
  color: #666;
}
.blurth {
  background: #e21717;
  color: #fff;
}
.el-form-item__content {
  font-size: 12px;
}
</style>
